<template>
    <el-container>
      <el-aside width="30%">
        <el-container class="">
          <el-main>
            <file-list :files="files" @select-file="selectFile" @update-files="updateFiles"/>
          </el-main>
          <el-footer>
            <file-description :content="selectedFileContent"/>
          </el-footer>
        </el-container>
      </el-aside>
      <el-main>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="Tab 1" name="first">
            <div>Tab Content 1</div>
          </el-tab-pane>
          <el-tab-pane label="Tab 2" name="second">
            <div>Tab Content 2</div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-aside width="30%">
        <hex-viewer :content="selectedFileContent"/>
      </el-aside>
    </el-container>
  </template>
  
  <script>
  import FileList from './components/FileList.vue';
  import FileDescription from './components/FileDescription.vue';
  import HexViewer from './components/HexViewer.vue';
  
  export default {
    components: {
      FileList,
      FileDescription,
      HexViewer
    },
    data() {
      return {
        files: [
          { label: 'System File 1', content: 'This is system file 1' },
          { label: 'System File 2', content: 'This is system file 2' }
        ],
        selectedFileContent: '',
        activeTab: 'first'
      };
    },
    methods: {
      selectFile(file) {
        this.selectedFileContent = file.content;
      },
      updateFiles(files) {
        this.files = files;
      }
    }
  };
  </script>
  
  <style>
  html, body, #app {
    height: 100%;
  }
  
  .el-container {
    height: 100vh;
    width: 100vw;
  }
  
  .el-aside, .el-main {
    height: 100%;
  }
  </style>
  